<ui:composition template="/template.xhtml" xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jstl/core"
                xmlns:t="http://myfaces.apache.org/tomahawk">
    <ui:define name="customs">
        <script type="text/javascript" src="#{contextPath}/js/paging.js"/>
        <style type="text/css">
            .pg-normal {
                color: black;
                font-weight: normal;
                text-decoration: none;
                cursor: pointer;
            }
            .pg-selected {
                color: blue;
                font-weight: bold;
                text-decoration: underline;
                cursor: pointer;
            }
        </style>
    </ui:define>
    <ui:define name="main-content">        
        <h:form id="searchRegistrationForm" styleClass="wufoo leftLabel">
            <h2><span><h:outputText value="#{resource['registration.records']}"/></span></h2>
            <center>
                <table style="border: 1px solid #CCCCCC; background: #E3E3E3" width="70%">
                    <tr>
                        <td>                                            
                            <ul>
                                <li class="name">
                                    <label class="desc" for="primer_nombre">
                                        #{resource['person.fullName']}
                                    </label>
                                    <span>
                                        <input jsfc="h:inputText" id="primer_nombre" size="12" type="text" class="field text"
                                               value="#{searchRegistrationBean.firstName}"/>
                                        <label for="primer_nombre"><h:outputText value="#{resource['person.firstName']}"/></label>
                                    </span>
                                    <span>
                                        <input jsfc="h:inputText" id="segundo_nombre" size="12" type="text" class="field text"
                                               value="#{searchRegistrationBean.middleName}"/>
                                        <label for="segundo_nombre"><h:outputText value="#{resource['person.middleName']}"/></label>
                                    </span>
                                    <span>
                                        <input jsfc="h:inputText" id="primer_apellido" size="12" type="text" class="field text"
                                               value="#{searchRegistrationBean.lastName}"/>
                                        <label for="primer_apellido"><h:outputText value="#{resource['person.lastName']}"/></label>
                                    </span>
                                    <span>
                                        <input jsfc="h:inputText" id="segundo_apellido" size="12" type="text" styleClass="field text"
                                               value="#{searchRegistrationBean.secondLastName}"/>
                                        <label for="segundo_apellido"><h:outputText value="#{resource['person.secondLastName']}"/></label>
                                    </span>
                                </li>
                                <li class="name">
                                    <label class="desc" for="memberId">
                                        <h:outputText value="#{resource['attendee.memberId']}"/>
                                    </label>                    
                                    <span>
                                        <h:inputText id="memberId" class="field text"
                                                     value="#{searchRegistrationBean.memberId}"/>
                                    </span>
                                </li>
                                <li class="name">
                                    <label class="desc" for="category">
                                        <h:outputText value="#{resource['attendee.category']}"/>
                                    </label>
                                    <span>
                                        <h:inputText id="category" class="field text"
                                                     value="#{searchRegistrationBean.categoryString}"/>
                                    </span>
                                </li>
                                <li class="name">
                                    <label class="desc" for="residence">
                                        <h:outputText value="#{resource['person.residence']}"/>
                                    </label>
                                    <span>
                                        <h:inputText id="residence" class="field text"
                                                     value="#{searchRegistrationBean.countryString}"/>
                                    </span>
                                </li>
                                <li class="name">
                                    <label class="desc" for="branch">
                                        <h:outputText value="#{resource['attendee.branch']}"/>
                                    </label>
                                    <span>
                                        <h:inputText id="branch" class="field text"
                                                     value="#{searchRegistrationBean.branch}"/>
                                    </span>
                                </li>
                            </ul>                            
                        </td>
                    </tr>
                </table>
            </center>
            <br/>
            <div>
                <h:commandLink action="#{searchRegistrationBean.execute}" class="button_round">
                    <ins>#{resource['button.search']}</ins>
                </h:commandLink>
                <h:commandLink action="#{searchRegistrationBean.confirm}" class="button_round">
                    <ins>#{resource['button.confirm']}</ins>
                </h:commandLink>
                <h:commandLink action="#{searchRegistrationBean.roomAssignment}" class="button_round">
                    <ins>#{resource['button.rooms']}</ins>
                </h:commandLink>
                <h:commandLink action="#{searchRegistrationBean.cleanRoomAssignment}" class="button_round">
                    <ins>#{resource['button.cleanRooms']}</ins>
                </h:commandLink>
                <h:commandLink action="#{searchRegistrationBean.reset}" class="button_round">
                    <ins>#{resource['button.clean']}</ins>
                </h:commandLink> 
                <h:commandLink action="#{searchRegistrationBean.copy}" class="button_round">
                    <ins>#{resource['button.copy']}</ins>
                </h:commandLink>
                <h:commandLink action="#{registrationBean.init}" class="button_round">
                    <ins>#{resource['button.new']}</ins>
                </h:commandLink>
            </div>
            <div id="errorMsgLbl" align="center"><h:messages id="errorMessages" layout="table"/></div>
            <div id="pageNavPosition" align="center"/>
            <h:dataTable id="tblSearchRegistrationResults" value="#{searchRegistrationBean.results}" var="attendee" 
                         styleClass="datatable" width="100%" columnClasses="columnLeft, columnCenter, columnCenter, columnCenter, columnLeft, columnLeft, columnCenter">
                <t:column width="20%" sortable="true">
                    <f:facet name="header">
                        <h:outputText value="#{resource['person.fullName']}"/>
                    </f:facet>
                    <h:commandLink action="edit" actionListener="#{attendeeBean.startup}" value="#{attendee.wrapped.fullName}">
                        <f:param id="id0" value="#{attendee.wrapped.id}"/>
                    </h:commandLink>
                    <br/>
                    <h:outputText value="#{attendee.wrapped.email}"/>
                    <br/>
                    <h:commandLink onclick="printCarnet(#{attendee.wrapped.id})" class="button_round">
                        <ins>#{resource['button.printId']}</ins>
                    </h:commandLink>
                </t:column>
                <t:column width="10%">
                    <f:facet name="header">
                        <h:outputText value="#{resource['person.residence']}"/>
                    </f:facet>
                    <h:outputText value="#{attendee.wrapped.residence.name}"/>
                    <br/>
                    <h:outputText value="#{attendee.wrapped.branch}"/>
                </t:column>
                <t:column width="10%">
                    <f:facet name="header">
                        <h:outputText value="#{resource['attendee.roomPlan']}"/>
                    </f:facet>
                    <h:outputText value="#{attendee.wrapped.roomPlan.name}"/>
                    <br/>
                    <h:outputText value="#{attendee.wrapped.lodging.room}"/>
                </t:column>
                <t:column width="10%">
                    <f:facet name="header">
                        <h:outputText value="#{resource['attendee.category']}"/>
                    </f:facet>
                    <h:outputText value="#{attendee.wrapped.category.description}"/>
                    <br/>
                    <h:outputText value="#{resource['attendee.memberId']}: " rendered="#{attendee.wrapped.memberId != null and attendee.wrapped.memberId != ''}"/>
                    <h:outputText value="#{attendee.wrapped.memberId}"/>
                </t:column>                
                <t:column width="10%">
                    <f:facet name="header">
                        <h:outputText value="Fecha de registro"/>
                    </f:facet>
                    <h:outputText value="#{attendee.wrapped.createdDate}">
                        <f:convertDateTime pattern="dd/MM/yyyy"/>
                    </h:outputText>
                </t:column>
                <t:column width="10%">
                    <f:facet name="header">
                        <h:outputText value="#{resource['attendee.currentStage']}"/>
                    </f:facet>
                    <h:commandLink action="select" actionListener="#{confirmationBean.startup}" 
                                   value="#{attendee.wrapped.currentStage}">
                        <f:param id="id" value="#{attendee.wrapped.id}"/>
                    </h:commandLink>
                    <br/>
                    <!--h:outputText value="#{attendee.wrapped.memberVerification}" style="font-size:70%"/-->
                    <h:outputText value="#{resource['attendee.confirmedAt']}" rendered="#{attendee.wrapped.currentStage == 'PRESENTE'}"/>
                    <br/>
                    <input jsfc="h:outputText" id="confirmationDate" rendered="#{attendee.wrapped.currentStage == 'PRESENTE'}"
                           value="#{attendee.wrapped.confirmationDate}" style="color: red !important;">
                        <f:convertDateTime pattern="dd/MM/yyyy h:mm a"/>
                    </input>
                </t:column>                 
                <t:column width="10%">
                    <f:facet name="header">
                        <h:outputText value="#{resource['attendee.confirmationNumber']}"/>
                    </f:facet>
                    <h:outputText value="#{attendee.wrapped.id}"/>
                    <br/>                    
                    <h:commandLink onclick="printReceipt(#{attendee.wrapped.id})" class="button_round">
                        <ins>#{resource['button.printReceipt']}</ins>
                    </h:commandLink>
                </t:column>
                <t:column width="10%">
                    <f:facet name="header">
                        <h:selectBooleanCheckbox id="selectAll" title="Seleccionar todos"
                                                 onclick="if (this.checked) {
                                console.log('Checked: true');
                                $('input[id*=ckRecord]').each(function(node) {
                                    $(this).attr('checked', true);
                                });
                            } else {
                                $('input[id*=ckRecord]').each(function(node) {
                                    $(this).attr('checked', false);
                                });
                            }"/>    
                    </f:facet>
                    <h:selectBooleanCheckbox id="ckRecord" value="#{attendee.marked}"/>                    
                </t:column>
            </h:dataTable>
        </h:form>
        <script>
                        function printReceipt(id) {
                            window.open('#{contextPath}/print.pdf?id=' + id + '&amp;type=receipt', 'CONESCAPAN_XXXIII', 'height=800,width=600,toolbar=no,menubar=no,location=no,resizable=yes');
                        }
                        function printCarnet(id) {
                            window.open('#{contextPath}/carnetPrint.pdf?id=' + id + '&amp;type=carnet', 'CONESCAPAN_XXXIII', 'height=600,width=400,toolbar=no,menubar=no,location=no,resizable=yes');
                        }
                        var table = document.getElementById('searchRegistrationForm:tblSearchRegistrationResults');
                        if (table != null) {
                            var pager = new Pager(table, 20);
                            pager.init();
                            pager.showPageNav('pager', 'pageNavPosition');
                            pager.showPage(1);
                        }
        </script>
    </ui:define>
</ui:composition>